<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- <div id="box">
      <h1>name</h1>
      <p>age</p>
      <h1>info</h1>
    </div> -->
    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>
    <script>
      //需求: 根据数据,动态创建一个div,渲染到页面上
      let obj = {
        name: 'hj',
        age: 43,
        info: 'lsp',
      }

      //   1. 创建div的虚拟dom(虚拟dom是为了真正创建的真实dom的一个描述)
      //   React.createElement('标签名',{标签的属性: 值, 属性: 值}, 子节点, 子节点,...)
      const name = React.createElement('h1', {}, obj.name)
      const age = React.createElement('p', {}, obj.age)
      const info = React.createElement('h1', {}, obj.info)
      const div = React.createElement('div', { id: 'box' }, name, age, info)

      //   2. 根据虚拟dom创建真实dom,渲染页面

      //   ReactDOM.render(要被渲染的虚拟dom, 真实DOM树的某个节点)
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
